<template>
	<div class='project-basic-info'>
		<el-form label-width="80px">
			<h2 class="center">基本信息</h2>
			<!-- 头像 -->
			<div class="center">
				<el-image
					style="width: 100px;"
					:src="project.avatarUrl || LOGO"
					fit="fill"
					:preview-src-list="[project.avatarUrl]"
				/>
			</div>
			<el-form-item label="项目标题">
				<h2>{{project.name}}</h2>
			</el-form-item>
			<el-form-item label="相关课程">
				{{project.courseType.label}} - {{project.courseName}}
			</el-form-item>
			<el-form-item label="创建者">
				{{project.creatorUser.userId}} - {{project.creatorUser.nickname}}
			</el-form-item>
			<el-form-item label="热度统计">
				<span>
					<Iconfont
						type=''
						color= '#f56c6c'
						name='el-icon-star-on'
					/>
					{{project.collect || 0}}
				</span>
				<span style="margin-left: 10px;">
					<Iconfont
						type=''
						name='el-icon-view'
					/>
					{{project.read || 0}}
				</span>
			</el-form-item>
			<!-- 项目标签 -->
			<el-form-item label="项目标签">
				<el-tag
					style="margin-right: 5px;"
					v-for="tag in project.tags"
					:key="tag"
				>
					{{tag}}
				</el-tag>
			</el-form-item>
			<!-- 创建时间 -->
			<el-form-item label="创建时间">
				{{project.createTime}}
			</el-form-item>
			<!-- 查看介绍 -->
			<el-form-item label="项目介绍">
				<el-button
					size="small"
					@click="showIntro=true"
				>
					点击查看
				</el-button>
			</el-form-item>
		</el-form>
		<IntroCard
			v-if="showIntro"
			title="项目介绍"
			:html="project.intro"
			@close="showIntro=false"
		/>
	</div>
</template>

<script>
import { putProject } from '@project/api/project'
import { LOGO } from '@/constants/staticData'
export default {
  props: {
    project: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      LOGO,
      showIntro: false,
      competitions: [],
      awardLevel: this.project.awardLevel,
      compId: this.project.compId
    }
  }
}
</script>

<style lang='scss' scoped>
.project-basic-info .el-form {
  height: 100%;
}
</style>
